<template>
  <div class="test">
    <div class="echart-container">
      <div class="echart-item w33" v-for="(item, index) in dataList" :key="index">
        <echart-line class="echart-content" :dataSource="item.dataSource" v-if="item.type === 'line'"
          @clickLine="handleClickLine"
        />
        <echart-bar class="echart-content" :dataSource="item.dataSource" v-else-if="item.type === 'bar'"
          @clickBar="handleClickBar"
        />
        <echart-pie class="echart-content" :dataSource="item.dataSource" v-else-if="item.type === 'pie'"
          @clickPie="handleClickPie"
        />
        <el-tag v-else>TODO: {{ item.type }}</el-tag> 
      </div>
    </div>
  </div>
</template>

<script>
import EchartLine from "@/jqkit/CustomEcharts/echartLine"
import EchartBar from "@/jqkit/CustomEcharts/echartBar"
import EchartPie from "@/jqkit/CustomEcharts/echartPie"
import { 
  dataSourceLine, dataSourceSmoothedLine, dataSourceArea, dataSourceStackedLine, dataSourceStackedArea, dataSourceGradientStackedArea,
  dataSourceBar, dataSourceAxisAlign, dataSourceSetStyleOfSingleBar, dataSourceHorizontalBar, dataSourceStackedHorizontalBar, dataSourceMixed,
  dataSourcePie, dataSourceDoughnut, dataSourceNightingale
} from "@/jqkit/CustomEcharts/demo/echartData"
export default {
  name: "Test",
  components: {
    EchartBar,
    EchartLine,
    EchartPie
  },
  data() {
    return {
      dataList: [],
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataList = [
        { type: 'line', dataSource: dataSourceLine },
        { type: 'line', dataSource: dataSourceSmoothedLine },
        { type: 'line', dataSource: dataSourceArea },
        { type: 'line', dataSource: dataSourceStackedLine },
        { type: 'line', dataSource: dataSourceStackedArea },
        { type: 'line', dataSource: dataSourceGradientStackedArea },

        { type: 'bar', dataSource: dataSourceBar },
        { type: 'bar', dataSource: dataSourceAxisAlign },
        { type: 'bar', dataSource: dataSourceSetStyleOfSingleBar },
        { type: 'bar', dataSource: dataSourceHorizontalBar },
        { type: 'bar', dataSource: dataSourceStackedHorizontalBar },
        { type: 'bar', dataSource: dataSourceMixed },

        { type: 'pie', dataSource: dataSourcePie },
        { type: 'pie', dataSource: dataSourceDoughnut },
        { type: 'pie', dataSource: dataSourceNightingale }
      ].reverse()
    },
    handleClickLine(params) {
      console.log("handleClickLine", params)
    },
    handleClickBar(params) {
      console.log("handleClickBar", params)
    },
    handleClickPie(params) {
      console.log("handleClickPie", params)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.test {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: auto;
  .echart-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    width: 100%;
    // height: 90vh;
    padding: 10px;
    background-color: #fff;
    overflow: auto;
    .echart-item {
      height: 40% !important;
      border: 1px dashed #eee;
      border-radius: 10px;
      padding: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      background-color: #fff;
      overflow: hidden;
      .echart-content {
        height: 100% !important;
        transition: transform 0.2s ease;
      }
      // .echart-content:hover{
      //   transform: scale(1.1);
      // }
      &:last-child {
        margin-right: 0;
      }
    }
    .w25 {
      // 100% / 4 - (10px * 3) / 4
      width: calc(25% - 7.5px) !important;
    }
    .w25:nth-child(4n+4) {
      margin-right: 0;
    }
    .w33 {
      // 100% / 3 - (10px * 2) / 3
      width: calc(33.33% - 6.66px) !important;
    }
    .w33:nth-child(3n+3) {
      margin-right: 0;
    }
    .w50 {
      // 100% / 2 - (10px * 1) / 2
      width: calc(50% - 5px) !important;
    }
    .w50:nth-child(2n+2) {
      margin-right: 0;
    }
    .w100 {
      width: 100 !important;
      margin-right: 0;
    }
  }
  .echart-container::-webkit-scrollbar {
    display: none;
  }
}
</style>